<template>
    <div>
       <el-row >
            <el-col :span="6">
                <el-card class="box-card">
                     <div slot="header" class="clearfix">
                        <span >个人信息</span>
                    </div>
                    <div>
                        <div class="demo-image">
                            <div class="block" v-for="fit in fits" :key="fit">
                                <span class="demonstration">{{ fit }}</span>
                                <el-image
                                style="width: 100px; height: 100px"
                                :src="url"
                                :fit="fit"></el-image>
                            </div>
                        </div>
                    </div>
                     <ul class="user-info">
                        <li class="li"><div style="height: 100%"><i class="el-icon-user"/>登录账号<div class="user-right">{{eaccount}}</div></div></li>
                        <li class="li"><i class="el-icon-user-solid"/>用户姓名 <div class="user-right">{{ename}}</div></li>
                        <li class="li"><i class="el-icon-s-cooperation"/>所属职位 <div class="user-right">销售顾问</div></li>
                        <li class="li"><i class="el-icon-phone-outline"/>手机号 <div class="user-right">{{phone}}</div></li>
                        <li class="li"><i class="el-icon-s-promotion"/>密码 <div class="user-right">{{epwd}}</div></li>
                        <li class="li">
                            <i class="el-icon-suitcase"/>安全设置 
                            <div class="user-right">
                                 <el-button size="mini" type="primary" plain @click="edit">修改密码</el-button>
                                <!-- <a @click="Edit">修改邮箱</a> -->
                            </div>
                        </li>                       
                     </ul>                   
                </el-card>
            </el-col>
            <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <!-- 新增预约的弹窗 -->
            <el-dialog title="修改密码" :visible.sync="dialogFormAdd">
            <el-form :model="form1">
               <el-form-item label="id" :label-width="formLabelWidth" v-show="false">
                <el-input v-model="eid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="id" :label-width="formLabelWidth" v-show="false">
                <el-input v-model="epwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="旧密码" :label-width="formLabelWidth">
                <el-input v-model="oldpwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input v-model="newpwd" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormAdd = false">取 消</el-button>
                <el-button type="primary" @click="handleEditok">确 定</el-button>
            </div>
            </el-dialog>      
    </div>
</template>
<script>
  export default {
    created() {
    this.list();
  },
    data() {
      return {
        fits: [''],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

            //新增员工信息
        dialogTableAdd: false,
        dialogFormAdd: false,
        formLabelWidth: "120px",
        // list:"",

        tableData: "",
        eid:"",
        ename:"",
        eaccount:"",
        epwd:"",
        phone:"",
        sex:"",
        newpwd:"",
        oldpwd:""

      }
    },
    methods: {
      list() {
      let self = this;
      this.$axios
        .post("/ever-emp/myself")
        .then((res) => {
          console.log(res), (self.tableData = res.data.list);
          self.eid=res.data.list.eid,  
          self.ename=res.data.list.ename,
          self.eaccount=res.data.list.eaccount,
          self.phone=res.data.list.phone,
          self.epwd=res.data.list.epwd   
        })
        .catch((err) => {
          console.error(err);
        });
      },
    //修改密码
    edit() {
      this.dialogFormAdd = true;
    },
     //确认修改预约信息
    handleEditok() {
      this.dialogFormAdd = false;
      
      let parm = {
        eid: this.eid,
        epwd:this.epwd,
        oldpwd: this.oldpwd,
        newpwd: this.newpwd,
        phone:this.phone
      };         
         this.$axios.post("/ever-emp/updatePwd", parm).then((res) => {
        this.list();
      });
      
     
    },

  },
    
  }

 
</script>






<style>
  .el-row {
    margin-bottom: 20px;
    margin-bottom: 0;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
  .user-info {
    padding-left: 0;
    list-style: none;
     
    }
    .li{
      border-bottom: 1px solid #F0F3F4;
      padding: 11px 0;
      /* font-size: 13px; */
    }
    
    .user-right {
      float: right;
      color: #317EF3;
      
    }
  
</style>
